<template>
  <div class='paper-dialog'>
    <el-dialog title="试卷编辑" class="large_dialog" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form ref="form" :model="formData" :rules="rules" label-width="160px" size="small">
        <el-row>
          <el-col :span="12"> <el-form-item label="计划编号:" prop="planNum">
              <el-input v-model="formData.planNum" />
            </el-form-item></el-col>
          <el-col :span="12"> <el-form-item label="计划名称:" prop="planName">
              <el-input v-model="formData.planName" />
            </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划开始时间:" prop="planStartTime">
              <el-date-picker v-model="formData.planStartTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" start-placeholder="开始日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间:" prop="planEndTime">
              <el-date-picker v-model="formData.planEndTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" start-placeholder="开始日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="任务路线:" prop="taskLine">
          <el-input v-model="formData.taskLine" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划类型:" prop="planType">
              <el-select v-model="formData.planType">
                <el-option v-for="dict in dict.type.inspection_project_type" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="周期计划:" prop="executeCycleRule">
              <el-select v-model="formData.executeCycleRule">
                <el-option v-for="dict in dict.type.inspection_project_type" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="计划状态:" prop="status">
          <el-select v-model="formData.status">
            <el-option v-for="dict in dict.type.inspection_project_type" :key="dict.value" :label="dict.label" :value="dict.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联文档:" prop="files">
          <upload-drag @change="fileChange" v-model="formData.files"></upload-drag>
        </el-form-item>
        <el-form-item label="规则描述:" prop="ruleDescribe">
          <el-input type="textarea" :rows="3" placeholder="请输入描述" v-model="formData.ruleDescribe" />
        </el-form-item>
      </el-form>
      <PlanProject ref="planProject" @selectChange="planProjectSelect"></PlanProject>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn_cancel">取 消</el-button>
        <el-button @click="submitForm" type="primary" class="btn_primary">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateOsiPlan, addOsiPlan } from '../api/plan'
import PlanProject from './PlanProject.vue'
import UploadDrag from '@/components/UploadFiles'
export default {
  dicts: ['inspection_project_type','inspection_plan_type'],
  data () {
    return {
      dialogVisible: false,
      // 考试资料数据
      formData: {},
      // 试卷表单验证规则
      rules: {
        //  taskContent: undefined,
        // taskLine: undefined,
        // taskName: undefined,
        // taskNum: undefined,
        // taskRequire: undefined,
        taskContent: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        taskLine: [{ required: true, message: '请输入任务线路', trigger: 'blur' },],
        taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' },],
        taskNum: [{ required: true, message: '请输入编号', trigger: 'blur' }],
        taskRequire: [{ required: true, message: '请输入要求', trigger: 'blur' },],
      }
    };
  },
  computed: {},
  watch: {},
  created () {

  },
  mounted () {

  },
  methods: {
    show (data) {
      this.dialogVisible = true
      this.resetForm()
      if (data !== undefined) {
        this.$nextTick(() => {
          this.formData = JSON.parse(JSON.stringify(data))
        })
      }
      this.$nextTick(()=>{
        this.$refs.planProject.show()
      })
    },
    // 清空formData 
    resetForm () {
      this.formData = {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数 
        executeCycleRule: undefined,
        files: [],  // 文件列表 { fileName: '', fileUrl: '' }
        inspectionProjectIds: [], // 文件列表 { fileName: '', fileUrl: '' }
        planEndTime: undefined, // 结束时间
        planName: undefined, // 计划名称
        planNum: undefined, // 计划编号
        planStartTime: undefined, // 计划开始时间
        planType: '0', // 计划类型
        ruleDescribe: undefined, // 规则描述
        status: '0' // 计划状态
      }
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    // 提交Form表单
    async submitForm () {
      try {
        const isAddOperation = this.formData.inspectionPlanId === undefined
        const method = isAddOperation ? addOsiPlan : updateOsiPlan
        const message = isAddOperation ? '新增成功' : '修改成功'
        const response = await method(this.formData)
        if (response.code === 200) {
          this.dialogVisible = false
          this.$message.success(message)
          this.$emit('replace')
        }
      }
      catch (error) {
        console.log(error)
        this.$message.error('操作失败')
      }
    },
    fileChange (file) {
      console.log(file)
    },
    planProjectSelect(rows) {
      console.log(rows)
      this.formData.inspectionProjectIds = rows.map(item => item.inspectionProjectId)
      console.log(this.formData.inspectionProjectIds)
    }
  },
  components: {
    UploadDrag,
    PlanProject
  }
}
</script>

<style lang='less' scoped>
</style>